<template>
    <div class="orderRecords">
        <div class="orderRecords-container">
            <div class="orderRecords-container-top">
                    <div class="top-left">清台</div>
                    <div class="top-right" @click="router.back()">关闭</div>
            </div>
            <div class="orderRecords-container-nav">
                    <div class="upper-item">
                        <div class="book-title">开始时间：</div>
                        <el-date-picker
                            v-model="showTime"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="defaultTime1"
                            @change="timeChange"
                        >
                        </el-date-picker>
                    </div>
                    <div class="upper-item">
                        <div class="book-title">桌台号：</div>
                        <el-input v-model="recordsForm.roomName" placeholder="请选择桌台号" readonly ></el-input>
                    </div>
                    <div class="upper-item" style="justify-content: flex-end;">
                        <div class="search" @click="search">查询</div>
                        <div class="clear" @click="reSet">清空筛选</div>
                    </div>
           
            </div>
            <div class="orderRecords-container-main">
                <el-table
                    :data="tableData"
                    style="width: 100%;"
                    header-row-class-name="tableHeaderRowClassName"
                >
                    <el-table-column prop="consumeCode" label="台单号" min-width="20%" align="center"> </el-table-column>
                    <el-table-column label="开台时间" min-width="20%"  align="center">
                        <template #default="scope">{{ valiTimeSpe(scope.row.startTime) }}</template>
                    </el-table-column>
                    <el-table-column label="清台时间" min-width="20%"  align="center">
                        <template #default="scope">{{ valiTimeSpe(scope.row.endTime) }}</template>
                    </el-table-column>
                    <el-table-column prop="memberName" label="客户" min-width="10%" align="center"> </el-table-column>
                    <el-table-column prop="memberMobile" label="电话" min-width="15%" align="center"> </el-table-column>
                    <el-table-column prop="maintainUserName" label="营销" min-width="10%" align="center"> </el-table-column>
                    <el-table-column prop="address" label="消费详情" min-width="10%"  align="center">
                        <template #default="scope"><div class="lookDetail" @click="getDetail(scope.row)">查看详情</div></template>
                     </el-table-column>
                    <el-table-column prop="resetTimes" label="复台次数" min-width="10%"  align="center"> </el-table-column>
                    <el-table-column label="操作" min-width="20%"  align="center">
                        <template #default="scope">
                        <div class="opera">
                            <div class="opera-print">打印总单</div>
                            <div v-has-role="'order-reset'" class="opera-return" @click="returnTable(scope.row.roomCode,scope.row.consumeCode)">复台</div>
                        </div>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="orderRecords-container-footer">
                <el-pagination
                    background 
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    v-model:currentPage="recordsForm.pageIndex"
                    :page-size="recordsForm.pageSize"
                    layout="total, prev, pager, next,sizes, jumper"
                    :total="total"
                >
                </el-pagination>
                 <button class="footer-button">确定</button>
            </div>
        </div>
    </div>
    <el-dialog
        v-model="confirmShow"
        :show-close="false"
        width="35%"
    >
        <div class="confirmPopue">
            <div class="confirmPopue-title">复台</div>
            <div class="confirmPopue-center">
                <div class="confirmPopue-center-item">&nbsp;&nbsp;&nbsp;原桌台：<span class="item-value">{{ roomRestForm.roomName }}</span></div>
                <div class="confirmPopue-center-inp">
                    <div class="inp-title">目标桌台：</div>
                    <div v-if="!['0024', '0025'].includes(ls.get('USER_INFO')?.orgCode)">
                        <el-input v-model="roomRestForm.toRoomName" placeholder="请选择桌台" readonly/>
                    </div>
                    <div v-else>
                        <el-input v-model="roomRestForm.roomName" readonly/>
                    </div>
 
                    <div v-if="!['0024', '0025'].includes(ls.get('USER_INFO')?.orgCode)" class="inp-choose" @click="freeTableSelectShow=true">选择</div>
                </div>
            </div>
            <div class="popup-btn">
                <div class="btn-cancle" @click="confirmShow = false">取消</div>
                <div class="btn-submit" @click="roomRepair()">确认</div>
            </div>
        </div>
    </el-dialog>
    <FreeTableSelect v-model="freeTableSelectShow" @cancel="freeTableSelectShow = false" @confirm="selectTable"></FreeTableSelect>
</template>

<script setup>
import Api from '@/api'
import dayjs from "dayjs"
import ls from '@/lib/ls'
import FreeTableSelect from '@/views/components/FreeTableSelect.vue'
import { ElNotification } from 'element-plus'
import { valiTimeSpe } from '@/lib/util.js'
import useConfigStore from '@/store/config'
const configStore = useConfigStore() 
const route = useRoute()
const router = useRouter()

const tableInfo = ref(ls.get('TABLE_INFO'))
console.log(tableInfo);

// ------------------------------------------------------------------ 时间拼接（默认营业时间） -------------------------------------------------------------
const dateTime = dayjs();
const year = dateTime.year();
const month = dateTime.month() + 1; // 月份是从0开始的，所以要加1
const day = dateTime.date();
const [hoursStr, minutesStr, secondsStr] = configStore.shopInfo.orgReportStartTime.split(':'); // orgReportStartTime orgStartTime
console.log(hoursStr,minutesStr,secondsStr);
// 创建新的 Date 对象
const newDate = new Date(year, month - 1, day+1, hoursStr, minutesStr,secondsStr); // 月份又要减1，因为在 JavaScript 中月份是从0开始的
const oldDate = new Date(year, month - 1, day, hoursStr, minutesStr,secondsStr); // 月份又要减1，因为在 JavaScript 中月份是从0开始的

console.log(dayjs(newDate).format('YYYY-MM-DD HH:mm:ss'),dayjs(oldDate).format('YYYY-MM-DD HH:mm:ss'));
const defaultTime1 = ref([new Date(year, month - 1, day, hoursStr, minutesStr, secondsStr)]) // '12:00:00'

const showTime = ref([oldDate,newDate]) // 显示数组

// -------------------------------------------- 时间改变 -----------------------------------------------
const timeChange = (e)=>{
    recordsForm.value.startTime = dayjs(e[0]).format('YYYY-MM-DD HH:mm:ss')
    recordsForm.value.endTime = dayjs(e[1]).format('YYYY-MM-DD HH:mm:ss')
}
const recordsForm = ref({
    startTime:dayjs(oldDate).format('YYYY-MM-DD HH:mm:ss'), // 开台时间
    endTime:dayjs(newDate).format('YYYY-MM-DD HH:mm:ss'),
    // startTime:'2022-01-01 10:00:00', // 开台时间
    // endTime:'2025-01-01 10:00:00',
    pageSize:10, 
    pageIndex:1,
    roomName:tableInfo.value.roomName,
    roomCode:tableInfo.value.roomCode
})
console.log(route.query);
if(route.query && route.query.startTime){
    recordsForm.value.startTime = route.query.startTime
    recordsForm.value.endTime = route.query.endTime
    showTime.value = [route.query.startTime,route.query.endTime]
}
const tableData = ref([]) // 数据
const total = ref(0) // 总共多少数据

const freeTableSelectShow = ref(false)
const confirmShow = ref(false)
const selectTable = (e)=>{
    if(!e.code){
        ElNotification({
          title: '提示',
          message: '请选择桌号',
          type: 'warning',
        })
    }else{
        console.log(e);
        roomRestForm.value.toRoomCode = e.code
        roomRestForm.value.toRoomName = e.name
        freeTableSelectShow.value = false

    }
    
}
const roomRestForm = ref({
    toRoomCode:'', //  目标桌台
    toRoomName:'',
    roomCode: tableInfo.value.roomCode,// 原桌台
    roomName:tableInfo.value.roomName,
    consumeCode:''
})

// 复台
const returnTable = (e,consumeCode)=>{
    // return
    roomRestForm.value.consumeCode = consumeCode
    confirmShow.value = true
    console.log(e,consumeCode);
}
// 确认复台
const roomRepair = ()=>{
    console.log(roomRestForm.value);
   if(['0024', '0025'].includes(ls.get('USER_INFO')?.orgCode)) {
        roomRestForm.value.toRoomCode = tableInfo.value.roomCode
        roomRestForm.value.toRoomName = tableInfo.value.roomName
   }
    Api.Common.PcObjProcess.Do({"functionName":"RoomRest","contentData":roomRestForm.value})
        .then(res=>{
            ElNotification({
                title: '提示',
                message: res.result,
                type: 'success',
            })
            router.back()
    })
}
// 查看详情
const getDetail = (e)=>{
    console.log(e);
    ls.set('TABLE_INFO', e)
    ls.set('TABLE_BTN',1)
    router.push({path:'/order/orderTable'})
}
// 清空筛选 
const reSet = ()=>{
    showTime.value = []
    recordsForm.value = {
    startTime:'', // 开台时间
    endTime:'', // 结束时间
    roomCode:tableInfo.value.roomCode, // 房台号
    roomName:tableInfo.value.roomName,
    pageSize:10, // 
    pageIndex:1
}
}
// 查询
const search = (flag)=>{
    if(flag){
        recordsForm.value.pageIndex = 1
    }
    Api.Common.PcObjProcess.Do({"functionName":"GetClearOrder","contentData":recordsForm.value})
        .then(res=>{
            console.log(res);
            total.value = res.totalCount
            tableData.value = res.data
    })
}
search(true)

// 每页多少条更换
const handleSizeChange = (e)=>{
    console.log(e);
    recordsForm.value.pageSize = e
    search(true)
}
// 页码更换
const handleCurrentChange = (e)=>{
    console.log(e);
    recordsForm.value.pageIndex = e
    search()
}
</script>

<style scoped lang="scss">
@import '@/styles/com_style_input.css';
.orderRecords{
    background: #F2F2F2;
    white-space: nowrap;
    height: 100%;
    .orderRecords-container{
        margin: 0 auto;
        width: 1200px;
        padding: 20px 0 0 0;
        .orderRecords-container-top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 12px;
            .top-left{
                font-family: Microsoft YaHei;
                font-weight: bold;
                font-size: 20px;
                color: #212121;
                line-height: 20px;
            }
            .top-right{
                width: 100px;
                height: 48px;
                background: #CCCCCC;
                border-radius: 8px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #212121;
                line-height: 48px;
                text-align: center;
                cursor: pointer;
            }
        }
        .orderRecords-container-nav{
            width: 1200px;
            height: 88px;
            background: #FFFFFF;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            // flex-wrap: wrap;
            padding-top: 20px;
            margin-bottom: 20px;
            padding-right: 60px;
            .upper-item{
                display: flex;
                flex-basis: 33.33%;
                align-items: center;
                margin-bottom: 20px;
                ::v-deep(.el-date-editor .el-range__icon){
                    display: none
                }
                .book-title{
                    width: 120px;
                    text-align: right;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 16px;
                    color: #212121;
                    line-height: 16px;
                }
                .search{
                    width: 120px;
                    height: 48px;
                    background: #FFE566;
                    border-radius: 8px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 18px;
                    color: #212121;
                    line-height: 48px;
                    text-align: center;
                    margin-right: 20px;
                    // margin-left: 120px;
                    cursor: pointer;
                }
                .clear{
                    width: 120px;
                    height: 48px;
                    background: #E6E6E6;
                    border-radius: 8px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 18px;
                    color: #666666;
                    line-height: 48px;
                    text-align: center;
                    cursor: pointer;
                }
            }
            ::v-deep(.el-date-editor.el-input){
                width: 420px;
                height: 48px;
            }
            ::v-deep(.el-select__wrapper) {
                width: 420px;
                height: 48px;
            }
            ::v-deep(.el-input__wrapper ){
                width: 420px;
                height: 48px;
            }
            ::v-deep(.el-select){
                width: 420px;
                height: 48px;
            }
            ::v-deep(.el-input){
                width: 120px;
                height: 48px;
            }
        }
        .orderRecords-container-main{
            width: 1200px;
            height: 674px;
            background: #FFFFFF;
            border-radius: 8px;
            padding: 20px 20px 0;
            overflow: auto;
            .lookDetail{
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 14px;
                color: #00AAFF;
                line-height: 14px;
                cursor: pointer;
            }
            .opera{
                display: flex;
                align-items: center;
                justify-content: space-between;
                .opera-print{
                    width: 66px;
                    height: 34px;
                    background: #FFFFFF;
                    border-radius: 4px;
                    border: 1px solid #FF6A00;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 14px;
                    color: #FF6A00;
                    line-height: 34px;
                    text-align: center;
                    cursor: pointer;
                }
                .opera-return{
                    width: 66px;
                    height: 34px;
                    background: #FFFFFF;
                    border-radius: 4px;
                    border: 1px solid #FF6A00;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 14px;
                    color: #FF6A00;
                    line-height: 34px;
                    text-align: center;
                    cursor: pointer;
                }
            }
            ::v-deep(.tableHeaderRowClassName th){
                height: 48px;
                background: #F9F9F9;
                border-radius: 8px;
            }
            ::v-deep(.el-table td.el-table__cell){
                height: 46px;
                border-bottom: none;
            }
            ::v-deep(.el-table__inner-wrapper:before ){
                display: none;
            }
            ::v-deep(.el-table td.el-table__cell div){
                // padding: 0;
            }
        }
        .orderRecords-container-footer{
            display: flex;
            align-items: center;
            justify-content: center;
            padding-top: 20px;
            .footer-button{
                background: #FF6A00;
                border-radius: 8px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #FFFFFF;
                line-height: 18px;
                padding: 15px 22px;
                margin-left: 20px;
                cursor: pointer;
            }
            ::v-deep(.el-pagination){
                // width: 100%;
            }
            ::v-deep(.el-pagination>.is-first ){
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #666666;
                line-height: 18px;
            }
            ::v-deep(li.number){
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #666666;
                line-height: 18px;
            }
            ::v-deep(.el-select__wrapper){
                width: 140px;
                height: 48px;
                background: #E6E6E6;
                border-radius: 8px;
                // margin-right: 20px;
            }
            ::v-deep(.el-pagination.is-background .el-pager li ){
                width: 48px;
                height: 48px;
                border-radius: 8px;
                background-color: #E6E6E6 ;
            }
            ::v-deep(.el-pagination>.is-last){
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #666666;
                line-height: 18px;
            }
            ::v-deep(.el-input__wrapper){
                width: 80px;
                height: 48px;
                background: #E6E6E6;
                border-radius: 8px;
            }
            ::v-deep(.el-pagination .el-input__inner ){
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #666666;
                line-height: 18px;
            }
            ::v-deep(.el-pagination.is-background .el-pager li.is-active){
                background-color: #FF6A00 !important;
                color: var(--el-color-white);
            }
            ::v-deep(.el-select__placeholder){
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #666666;
                line-height: 18px;
            }
        
            // ::v-deep(.el-pagination button *){
            //   width: 15px;
            //   height:24px;
            //   font-size: 18px;
            //   color: #666666;
            //   line-height: 18px;
            // }
        }
   }

}
.confirmPopue{
    padding: 0 50px 20px;
  .confirmPopue-title{
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 20px;
    color: #212121;
    line-height: 20px;
    padding-bottom: 30px;
    border-bottom: 1px solid #E5E5E5;
  }
  .confirmPopue-center{
    .confirmPopue-center-item{
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #212121;
        line-height: 16px;
        padding: 60px 0 20px 0;
        .item-value{
            color: #FF6A00;
        }
    }
    .confirmPopue-center-inp{
        display: flex;
        align-items: center;
        padding-bottom: 251px;
        .inp-title{
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #212121;
            line-height: 16px;
        }
        .inp-choose{
            width: 100px;
            height: 48px;
            background: #FFE566;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #212121;
            line-height: 48px;
            text-align: center;
            cursor: pointer;
            margin-left: 50px;
        }
        ::v-deep(.el-input__wrapper ){
                width: 300px;
                height: 48px;
            }
            ::v-deep(.el-select){
                width: 300px;
                height: 48px;
            }
            ::v-deep(.el-input){
                width: 300px;
                height: 48px;
            }
    }
  }
    
  .popup-btn{
        display: flex;
        align-items: center;
        justify-content: center;
        .btn-cancle{
              text-align: center;
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 24px;
              color: #FF6A00;
              line-height: 60px;
              width: 160px;
              height: 60px;
              background: #FFFFFF;
              border-radius: 8px;
              border: 1px solid #FF6A00;
              margin-right: 36px;
              cursor: pointer;
        }
        .btn-submit{
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 24px;
              color: #FFFFFF;
              line-height: 60px;
              text-align: center;
              width: 160px;
              height: 60px;
              background: #FF6A00;
              border-radius: 8px;
              cursor: pointer;
            }
  }
  ::v-deep(.el-select__icon ){
    width: 18px;
    height: 11px;
    color: #212121;
    font-weight: 700;
  }
  ::v-deep(.el-input__inner){
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #212121;
    line-height: 16px;
  }
  ::v-deep(.el-radio__inner ){
    // margin-left: 20px;
    width: 20px;
    height: 20px
  }
  ::v-deep(.el-radio__input.is-checked .el-radio__inner ){
    border-color: #ff6a00; /* 选中状态边框颜色 */
    background-color: #ffffff; /* 选中状态背景颜色 */
  }
  ::v-deep(.el-radio__inner:after ){
    background-color: #ff6a00;
    width: 8px;
    height: 8px;
  }
  ::v-deep(.el-select__prefix) {
    display: none
  }
}
</style>
